<template>
  <div class="container">
    <div class="agenda">
      <h1 class="title">大会议程</h1>
      <p class="sub-title">西弧论剑 数字安全大会</p>
      <div class="main wrap">
        <header class="main-header">
          <h2>全部议程</h2>
          <el-input
            class="header-input"
            type="small"
            placeholder="Please input"
            clearable
          />
        </header>
        <div class="date-list">
          <div class="date-item active">全部</div>
          <div class="date-item deactive">5月5日</div>
          <div class="date-item deactive">5月5日</div>
          <div class="date-item deactive">5月5日</div>
          <div class="date-item deactive">5月5日</div>
        </div>
        <div class="category-list">
          <div class="category-item active">全部类型</div>
          <div class="category-item deactive">主论坛</div>
          <div class="category-item deactive">主论坛</div>
          <div class="category-item deactive">主论坛</div>
          <div class="category-item deactive">主论坛</div>
          <div class="category-item deactive">主论坛</div>
        </div>

        <div class="agenda-list">
          <div
            class="agenda-date-item"
            v-for="(dateItem, i) in agendaList"
            :key="i"
          >
            <div class="agenda-item-header">
              <h3>{{ dateItem.agendaDate }}</h3>
            </div>
            <div
              class="agenda-item-info"
              v-for="(info, i) in dateItem.agendaDateList"
              :key="i"
            >
              <div class="info-header">
                <div class="info-title">{{ info.agendaTitle }}</div>
                <div class="info-tag" v-for="(tag, i) in info.tag" :key="i">
                  {{ tag }}
                </div>

                <button>订阅</button>
              </div>
              <div class="info-other">
                <div class="info-tile">18:00-21:00</div>
                <div class="info-address">杭州市滨江区文化中心剧院一楼</div>
                <p>议程内容</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Meeting",
};
</script>
<script setup>
import { ref, onBeforeMount } from "vue";
import { useAgendaStore } from "@/stores/meeting";
let agendaStore = useAgendaStore();
let agendaList = ref([]);
onBeforeMount(async () => {
  await agendaStore.getAgendaList();

  agendaList.value = agendaStore.agendaList.value;
  console.log("🚀 ~ onBeforeMount ~ agendaStore:", agendaStore.agendaList);
});
// let arr=["200","300"];
</script>
<style lang="scss" scoped>
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
.wrap {
  width: 1480px;
  margin: 0 auto;
}
.container {
  width: 100%;
  height: 3000px;
  .agenda {
    overflow: hidden;
    margin-top: 105px;
    width: 100%;
    height: 3000px;
    background: url(../assets/meeting/agenda_bg.jpg);
    background-size: 100% 100%;
    .title {
      font-size: 30px;
      color: white;
      text-align: center;
      margin-top: 50px;
    }
    .sub-title {
      margin-top: 30px;
      color: white;
      font-size: 12px;
      text-align: center;
    }
    .main {
      margin-top: 60px;
      background: rgba(255, 255, 255, 0.6);
      // opacity: 0.8;
      padding: 30px;
      .main-header {
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        h2 {
          font-size: 30px;
          background: rgb(0, 180, 188);
          font-weight: bold;
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
        .header-input {
          width: 360px;
          // border-radius: 20px;
          height: 40px;
        }
      }
      .date-list,
      .category-list {
        display: flex;
        height: 40px;
        // background: pink;
        margin-top: 80px;
        gap: 20px;
        .date-item.deactive,
        .category-item.deactive {
          width: 180px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          border-radius: 20px;
          color: rgb(0, 180, 188);
          font-size: 20px;
          background: white;
        }
        .date-item.active,
        .category-item.active {
          width: 180px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          border-radius: 20px;
          color: white;
          font-size: 20px;
          background: linear-gradient(39deg, #3b7bc9, #59afb8);
        }
      }
      .agenda-list {
        margin-top: 50px;
        width: 100%;
        .agenda-date-item {
          .agenda-item-header {
            display: flex;
            background: white;
            h3 {
              width: 240px;
              height: 70px;
              line-height: 70px;
              text-align: center;
              font-size: 25px;
              color: white;
              clip-path: polygon(100% 0, 0% 0, 0 100%, 80% 100%);
              background: linear-gradient(39deg, #3b7bc9, #59afb8);
            }
          }
          .agenda-item-info {
            margin-top: 45px;
            border-bottom: 1px solid rgb(233, 243, 249);
            .info-header {
              display: flex;
              align-items: center;
              .info-title {
                font-size: 40px;
                font-weight: bold;
              }
              .info-tag {
                font-size: 16px;
                font-weight: bold;
                margin-left: 40px;
                color: rgb(0, 180, 188);
              }
              button {
                display: block;
                width: 150px;
                height: 40px;
                line-height: 40px;
                font-size: 20px;
                border: 1px solid rgb(0, 180, 188);
                border-radius: 20px;
                margin: 0 0 0 auto;
                color: rgb(0, 180, 188);
              }
            }
            .info-other {
              display: flex;
              margin-top: 20px;
              padding: 20px 2px;
              color: rgb(76, 78, 78);
              gap: 20px;
              font-size: 14px;
              p {
                margin: 0 20px 0 auto;
              }
            }
          }
        }
      }
    }
  }
}
</style>